<template>

    <div>
        <h1>发表评论</h1>

        <textarea placeholder="请输入要BB的内容，最多120个字" maxlength="120" v-model='msg'></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="allinmessage">
            <div class="itemMsg" v-for='(item,index) in commentList' :key="item.id" >
                    <p>
                        <span>第{{index}}楼</span>
                        <span>用户:{{item.name}}</span>
                        <span>发表时间:{{item.time}}</span>
                    </p>

                    <div>{{item.content}}</div>

            </div>

        </div>

       <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>

    </div>
         
</template>



<script>
export default {
           data:function() {
            
            return{
                msg: '',
                commentList:[],
                number:0
            };
        },

        created() {
          this.getCommentList()
        },

        methods: {
            getCommentList() {
                    for(var i =0;i<5;i++) {
                        this.commentList.push({id:i,name:'匿名用户'+i,time:'2017-11-03 15:57:49',content:'hello world'})
                    }
                    this.number = this.commentList.length
            },

            postComment() {
                //................上传操作

                if(this.msg.trim().length ==0) {
                    return
                }
                var objmsg = {
                    name:'匿名用户',
                    time: Date.now(),
                    content:this.msg.trim()
                }

                this.commentList.unshift(objmsg),
                this.msg=''

            },

            getMore() {
                        console.log(this.number)
                        for(var i = this.number+1; i< this.number+6 ; i++) {
                        this.commentList.push({id:i,name:'匿名用户'+i,time:'2017-11-03 15:57:49',content:'hello world'})
                         }
            },
        
        components: {

        },
        props:['msgid']
}
}
</script>


<style lang="less" scoped>

        h1 {
             font-size: 18px;
        }

        textarea {
            font-size: 14px;
            height: 85px;
            margin: 0;
        }

        .allinmessage {
            .itemMsg {
                p {
                   background-color: #ccc;
                   line-height: 30px;
                   font-size: 11px;
                }

                div {
                    background-color: #fff;
                    line-height: 30px;
                    font-size: 12px;
                }
            }
        }


</style>